<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.css" rel="stylesheet">
  <style>
    table {
      width: 100%;
    }

    td {
      /* text-align: left; */
    }
  </style>
</head>

<body>
  <button id="asd">111</button>
  <table border="1" id="table"></table>
  <div class="tb"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-treetable/3.2.0/jquery.treetable.js"></script>
<!-- <script src="./js/treetable.js"></script> -->
<script>
  // $('#table').on('click','.branch span',function() {
  //     // debugger
  //     var tid = $(this).parents('tr').attr('data-tt-id');
  //     if($(this).parents('tr').hasClass('expanded')) {
  //       $("[data-tt-parent-id="+ tid +"]").each(function(a,b){
  //       $(b).hide()
  //       });
  //     }
  //     if($(this).parents('tr').hasClass('collapsed')) {
  //       $("[data-tt-parent-id="+ tid +"]").each(function(a,b){
  //       $(b).show()
  //       });
  //     }
  //   })
  window.onload = function () {
    var treeTR, JsonOBJ, arrColumn, cloum, cc;
    function tree(w, bb) {
      for (var j = 0; j < w.length; j++) {
        treeTR += "<tr data-tt-id='" + bb + '-' + j + "' data-tt-parent-id='" + bb + "'>";
        treeTR += "<td>" + w[j].name + "</td>";
        // }
        treeTR += "</tr>";
        if (jQuery.isArray(w[j].subTbTeamsList)) {
          cc = bb + "-" + j;
          tree(w[j].subTbTeamsList, cc);
        }
        if (jQuery.isArray(w[j].tbmList)) {
          cc = bb + "-" + j;
          tree(w[j].tbmList, cc);
        }
      }
    }
    function aaa() {
      $.get('./mock/data.json', function (res) {
        JsonOBJ = res.rows;
        arrColumn = res.rows;
        treeTR += `<tr>
          <th>职能部门</th>
        </tr>`;
        for (var i = 0; i < JsonOBJ.length; i++) {
          treeTR += "<tr  data-tt-id='" + i + "'>";
          treeTR += "<td>" + JsonOBJ[i].name + "</td>";
          treeTR += "</tr>";
          cc = i;
          if (JsonOBJ[i].subTbTeamsList.length > 0) {
            tree(JsonOBJ[i].subTbTeamsList, cc);
          }
          if (JsonOBJ[i].tbmList && JsonOBJ[i].tbmList.length > 0) {
            tree(JsonOBJ[i].tbmList, cc);
          }

        }
        $("#table").append(treeTR);
     $('tr').each(function(i,e) {
            console.log($(e).attr(''));
        })
        $("#table").treetable({ expandable: true });
        //addTr(res.rows)
      });
    }
    aaa()
  }
</script>

</html>